<script setup lang='ts' name="video-list">
import { ref, toRefs, watch } from 'vue'
import { useRoute } from 'vue-router'

const props = withDefaults(defineProps<{
    steps: any
}>(), {
})

const route = useRoute()

const { steps } = toRefs(props)

const step = ref(0)

watch(() => route, (newRoute) => {
    const q: any = newRoute.query?.step ?? 0
    step.value = Number.parseInt(q)
}, {
    immediate: true,
})
</script>

<template>
    <div class="steps-container flex">
        <div v-for="(item, index) in steps"
             :key="index"
             class="steps-item h-50 w-316"
             :class="{ 'active-step': step === index, 'finish-step': step > index }"
        >
            <p class="flex items-center">
                <span class="index">{{ index + 1 }}</span>

                <span class="title">{{ item.title }}</span>

                <span class="line" />
            </p>

            <p class="desc">
                {{ item.desc }}
            </p>
        </div>
    </div>
</template>

<style lang="less" scoped>
.steps-container {
    .steps-item {
        .index {
            display: inline-block;
            width: 24px;
            height: 24px;
            text-align: center;
            line-height: 22px;
            border-radius: 12px;
            border: 1px solid #86909c;
            box-sizing: border-box;
            color: #86909c;
            font-size: 16px;
            margin-right: 20px;
        }

        .title {
            font-size: 24px;
            color: #86909c;
            font-weight: 600;
        }

        .line {
            display: inline-block;
            width: 148px;
            height: 2px;
            background: #86909c;
            margin-left: 16px;
        }

        .desc {
            font-size: 14px;
            color: #86909c;
            line-height: 22px;
            padding-left: 45px;
        }
    }

    .finish-step {
        .index {
            background: #fff;
            border: 1px solid #da0004;
            color: #da0004;
        }

        .title {
            color: #1a1a1a;
        }

        .line {
            background: #da0004;
        }

        .desc {
            color: #4e5969;
        }
    }

    .active-step {
        .index {
            background: #da0004;
            border: 1px solid #da0004;
            color: #fff;
        }

        .title {
            color: #da0004;
        }

        .desc {
            color: #4e5969;
        }
    }

    .steps-item:last-child .line {
        display: none;
    }
}
</style>
